<template>
  <template v-if="item.type === TableColumnOrFormTypeEnum.DYNAMICTABLESELECT">
    <el-form-item
      label-width="0px"
      :prop="propName + '.' + rowIndex + '.' + item.value"
      :rules="propName ? rules[item.value] : {}"
      :show-message="false"
    >
      <CommonDynamicTableSelect
        v-model="rowObj[keys.slice(-1)]"
        :disabled="(item.disableField && item.disableField(row)) ?? item.disabled"
        :dynamic-config="dynamicConfig"
        :readonly="(item.readonlyField && item.readonlyField(row)) ?? item.readonly"
        :row="row"
        :row-index="rowIndex"
        @on-handle-confirm-selection="onHandleConfirmSelection"
        @on-open-dynamic-table-select="onOpenDynamicTableSelect"
      />
    </el-form-item>
  </template>
  <template v-if="item.type === TableColumnOrFormTypeEnum.INPUT">
    <el-form-item
      label-width="0px"
      :prop="propName + '.' + rowIndex + '.' + item.value"
      :rules="propName ? rules[item.value] : {}"
      :show-message="false"
    >
      <el-input
        v-model="rowObj[keys.slice(-1)]"
        :disabled="(item.disableField && item.disableField(row)) ?? item.disabled"
        :readonly="(item.readonlyField && item.readonlyField(row)) ?? item.readonly"
        @change="onHandleChange({ field: item.value, row, rowIndex, $event })"
      />
    </el-form-item>
  </template>
  <template v-if="item.type === TableColumnOrFormTypeEnum.MONEYINPUT">
    <el-form-item
      label-width="0px"
      :prop="propName + '.' + rowIndex + '.' + item.value"
      :rules="propName ? rules[item.value] : {}"
      :show-message="false"
    >
      <CommonMoneyInput
        v-model="rowObj[keys.slice(-1)]"
        :disabled="(item.disableField && item.disableField(row)) ?? item.disabled"
        :readonly="(item.readonlyField && item.readonlyField(row)) ?? item.readonly"
        @handle-blur="onHandleChange({ field: item.value, row, rowIndex, $event })"
      />
    </el-form-item>
  </template>

  <template v-if="item.type === TableColumnOrFormTypeEnum.INPUTNUMBER">
    <el-form-item
      label-width="0px"
      :prop="propName + '.' + rowIndex + '.' + item.value"
      :rules="propName ? rules[item.value] : {}"
      :show-message="false"
    >
      <el-input-number
        v-model="rowObj[keys.slice(-1)]"
        clearable
        :controls="false"
        :disabled="(item.disableField && item.disableField(row)) ?? item.disabled"
        :max="item.max"
        :min="item.min"
        :placeholder="item.placeholder"
        :precision="item.precision == 0 ? 0 : item.precision || 2"
        :readonly="(item.readonlyField && item.readonlyField(row)) ?? item.readonly"
        @change="onHandleChange({ field: item.value, row, rowIndex, $event })"
      />
    </el-form-item>
  </template>

  <template v-if="item.type === TableColumnOrFormTypeEnum.SELECT">
    <el-form-item
      label-width="0px"
      :prop="propName + '.' + rowIndex + '.' + item.value"
      :rules="propName ? rules[item.value] : {}"
      :show-message="false"
    >
      <CommonSelect
        v-model="rowObj[keys.slice(-1)]"
        :disabled="(item.disableField && item.disableField(row)) ?? item.disabled"
        :opition-list="optionList"
        :placeholder="item.placeholder"
        :readonly="(item.readonlyField && item.readonlyField(row)) ?? item.readonly"
        style="width: 100%"
        @change="onHandleChange({ field: item.value, row, rowIndex, $event })"
      />
    </el-form-item>
  </template>

  <template v-if="item.type === TableColumnOrFormTypeEnum.SELECTTREE">
    <template v-if="item.multiple">
      <el-form-item
        label-width="0px"
        :prop="propName + '.' + rowIndex + '.' + item.value"
        :rules="propName ? rules[item.value] : {}"
        :show-message="false"
      >
        <SelectVxeTreeMany
          v-model="rowObj[keys.slice(-1)]"
          :data="optionList"
          :disabled="(item.disableField && item.disableField(row)) ?? item.disabled"
          :placeholder="item.placeholder"
          :readonly="(item.readonlyField && item.readonlyField(row)) ?? item.readonly"
        />
      </el-form-item>
    </template>
    <template v-else>
      <el-form-item
        label-width="0px"
        :prop="propName + '.' + rowIndex + '.' + item.value"
        :rules="propName ? rules[item.value] : {}"
        :show-message="false"
      >
        <SelectVxeTreeOne
          v-model="rowObj[keys.slice(-1)]"
          :data="optionList"
          :disabled="(item.disableField && item.disableField(row)) ?? item.disabled"
          :placeholder="item.placeholder"
          :readonly="(item.readonlyField && item.readonlyField(row)) ?? item.readonly"
          @change="onHandleChange({ field: item.value, row, rowIndex, $event })"
        />
      </el-form-item>
    </template>
  </template>
  <template v-if="item.type === TableColumnOrFormTypeEnum.RATE">
    <el-rate v-model="rowObj[keys.slice(-1)]" :disabled="(item.disableField && item.disableField(row)) ?? item.disabled" />
  </template>

  <template v-if="item.type === TableColumnOrFormTypeEnum.DATE">
    <el-form-item
      label-width="0px"
      :prop="propName + '.' + rowIndex + '.' + item.value"
      :rules="propName ? rules[item.value] : {}"
      :show-message="false"
    >
      <el-date-picker
        v-model="rowObj[keys.slice(-1)]"
        :disabled="(item.disableField && item.disableField(row)) ?? item.disabled"
        :format="item.dateFormat || 'YYYY-MM-DD'"
        :readonly="(item.readonlyField && item.readonlyField(row)) ?? item.readonly"
        :type="item.dateType || 'date'"
        :value-format="item.dateValueFormate || 'YYYY-MM-DD'"
        @change="onHandleChange({ field: item.value, row, rowIndex, $event })"
      />
    </el-form-item>
  </template>

  <template v-if="item.type === TableColumnOrFormTypeEnum.SWITCH">
    <CommonSwitch
      v-model="rowObj[keys.slice(-1)]"
      :active-url="item.activeUrl"
      :active-value="item.activeValue"
      :disabled="(item.disableField && item.disableField(row)) ?? item.disabled"
      :inactive-url="item.inactiveUrl"
      :inactive-value="item.inactiveValue"
      :key-value="keys.slice(-1)"
      :id="modelValue.id"
      @change="onHandleChange({ field: item.value, row, rowIndex, $event })"
    />
  </template>
</template>

<script>
import { TableColumnOrFormTypeEnum } from "@/plugins/commonType.enum.ts";
import CommonSelect from "@/plugins/form/components/CommonSelect.vue";
import CommonSwitch from "@/plugins/form/components/CommonSwitch.vue";
import CommonDynamicTableSelect from "@/plugins/form/components/CommonDynamicTableSelect.vue";
import SelectVxeTreeOne from "@/plugins/tree/SelectVxeTreeOne.vue";
import SelectVxeTreeMany from "@/plugins/tree/SelectVxeTreeMany.vue";
import CommonMoneyInput from "@/plugins/form/components/CommonMoneyInput.vue";

export default defineComponent({
  name: "CommonColumnItem",
  components: {
    CommonSelect,
    SelectVxeTreeOne,
    SelectVxeTreeMany,
    CommonMoneyInput,
    CommonSwitch,
    CommonDynamicTableSelect
  },
  props: {
    modelValue: {
      type: Object,
      default: () => {
        return {};
      }
    },
    rowIndex: {
      type: Number,
      default: null
    },
    propName: {
      type: String,
      default: ""
    },
    optionList: {
      type: Array,
      default: () => []
    },
    rules: {
      type: Object,
      default: () => {
        return {};
      }
    },
    dynamicConfig: {
      type: Object,
      default: () => {
        return {};
      }
    },
    item: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },

  emits: {
    "update:model-value": null,
    "on-handle-confirm-selection": null,
    "on-open-dynamic-table-select": null,
    "on-handle-change-value": null
  },

  setup(props, { emit }) {
    const keys = computed(() => {
      const keyArray = props.item.value?.split(".") || [];
      return keyArray;
    });
    const row = ref(props.modelValue);
    const getObjectKeyValue = () => {
      if (!keys.value || !keys.value.length) return;
      const { modelValue } = props;
      // const deepForm = hODeepClone(modelValue)
      const currentKeys = keys.value.slice(0, -1);

      if (!currentKeys || !currentKeys.length) {
        return modelValue;
      }
      const currentForm = currentKeys.reduce((pre, cur) => {
        return pre ? pre[cur] : undefined;
      }, modelValue);

      return currentForm;
    };
    const rowObj = ref(getObjectKeyValue());

    const onOpenDynamicTableSelect = params => {
      emit("on-open-dynamic-table-select", params);
    };

    const onHandleConfirmSelection = params => {
      emit("on-handle-confirm-selection", params);
    };

    const onHandleChange = params => {
      emit("on-handle-change-value", params);
    };

    watch(
      () => props.modelValue,
      () => {
        rowObj.value = getObjectKeyValue();
        row.value = props.modelValue;
      },
      {
        deep: true
      }
    );
    watch(
      () => rowObj.value,
      () => {
        emit("update:model-value", row.value);
      },
      {
        deep: true
      }
    );
    return {
      keys,
      row,
      rowObj,
      TableColumnOrFormTypeEnum,
      onHandleChange,
      onOpenDynamicTableSelect,
      onHandleConfirmSelection
    };
  }
});
</script>

<style lang="scss" scoped></style>
